<template>
    <div class="register">
        <div class="form">
            <div class="title" v-if="page_num==1">手机验证</div>
            <div class="title" v-if="page_num==2">账号注册</div>
            <div class="title" v-if="page_num==3">注册成功</div>
            <div v-if="page_num==1">
                <el-form :rules="rules" ref="user" :model="user">
                    <el-form-item style="width: 100%;margin-top: 30px;" prop="phone_number">
                        <el-select :placeholder="select" class="select" v-model="select">
                            <el-option v-for="item in options" :key="item.en" :label="item.tel" :value="item.en">
                                <span style="float: left">{{ item.tel }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                        <el-input placeholder="请输入手机号" class="phone" v-model="user.phone_number" ref="phone"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 100%" prop="code">
                        <el-input placeholder="验证码" class="Code" v-model="user.code"></el-input>
                        <el-button class="button" @click="getcode" :disabled="disabled">{{ code_text }}</el-button>
                    </el-form-item>
                    <el-form-item style="width: 100%;">
                        <el-button class="next" type="primary" @click="next1()">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="page_num==2">
                <el-form :rules="rules" ref="register" :model="user">
                    <el-form-item prop="name">
                        <el-input placeholder="请输入用户名" v-model="user.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="account">
                        <el-input placeholder="请输入账号" v-model="user.account"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入密码" v-model="user.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item prop="password2">
                        <el-input placeholder="确认密码" v-model="user.password2" type="password"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 100%;">
                        <el-button class="next" type="primary" @click="next2()">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="page_num==3">
                <div style="font-size: 150%;margin-top: 20px;">
                    <div class="type3">您的账号信息如下：</div>
                    <div class="type3">用户名: {{ user.name }} </div>
                    <div class="type3">账号: {{ user.account }} </div>
                    <div class="type3">密码: {{ user.password }} </div>
                </div>
                <el-button class="next" type="primary" @click="next3()">完成</el-button>
            </div>
            
            <div style="width: 100%;margin-top: 30px;" v-if="page_num!=3">
                <el-link @click="jump_url('/login')" class="text1" :underline="false">已有账号</el-link> 
                <el-link @click="jump_url('/')" class="text2" :underline="false">返回首页</el-link>
            </div>
        </div>
    </div>
</template>

<script>
import data from '../static/Telephone_area_code.json'
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data() {
        //自定义‘确认密码’的校验规则
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.user.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        //判断手机号是否已注册
        var validatephone = (rule, value, callback) => {
            UserManagementApi.SubmitRegisterRepeat('phoneNumber',this.user.phone_number).then(res => {
                if(res.data.data){
                    callback();
                }else{
                    callback(new Error("该手机号已注册"))
                }
            })
        };
        //判断用户名是否已注册
        var validatename = (rule, value, callback) => {
            UserManagementApi.SubmitRegisterRepeat('name',this.user.name).then(res => {
                if(res.data.data){
                    callback();
                }else{
                    callback(new Error("用户名已存在"))
                }
            })
        };
        //判断账号是否已注册
        var validateaccount = (rule, value, callback) => {
            UserManagementApi.SubmitRegisterRepeat('account',this.user.account).then(res => {
                if(res.data.data){
                    callback();
                }else{
                    callback(new Error("该账号已存在"))
                }
            })
        };
        return {
            page_num:1,//注册的步骤
            options: data.data,//json文件数据
            select: data.data[0].tel,//手机区域
            // code: '',//验证码
            code_bool:false,//正确的验证码
            code_text: '获取验证码',//验证码按钮文本
            disabled:false,//按钮是否可以点击
            rules:{//表单校验规则
                phone_number:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min:11,max:11, message:'请输入正确的手机号', trigger:'blur' },
                    { validator: validatephone, trigger:'blur' }
                ],
                code:[
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min:6, max:6, message:'验证码格式错误', trigger:'blur' }
                ],
                name:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min:1,max:12, message:'用户名最小1位，最大12位', trigger:'blur' },
                    { validator: validatename, trigger:'blur' }
                ],
                account:[
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min:3,max:18, message:'账号最小3位，最大18位', trigger:'blur' },
                    { validator: validateaccount, trigger:'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min:3,max:18, message:'密码最小3位，最大18位', trigger:'blur' }
                ],
                password2:[
                    { validator: validatePass2, trigger:'blur' }
                ],
            },
            user:{//表单
                phone_number: '',//手机号
                code:'',//验证码
                name:'',//用户名
                account:'',//账号
                password:'',//密码
                password2:'',//确认密码
            },
            
        }
    },
    methods: {
        //参数为url的跳转
        jump_url(url){
            this.$router.push(url)
        },
        //获取验证码
        getcode() {
            if(this.user.phone_number==''){
                this.$refs['user'].validateField('phone_number',(valid) => {})
                return false
            }
            //提交获取短信请求
            UserManagementApi.SubmitPhoneCode(this.user.phone_number).then(res => {
                if(res.data.code!=200){
                    return false
                }
                var time = '60'
                var timer = null
                var _this = this
                _this.code_text = time + 's后可操作'
                _this.disabled=true
                timer = setInterval(function () {
                    time--
                    _this.code_text = time + 's后可操作'
                    if (time == '0') {
                        _this.code_text = '获取验证码'
                        _this.code_bool = false
                        _this.disabled=false
                        //清除定时器
                        clearInterval(timer);
                    }
                }, 1000)
            })
        },
        //下一步
        next1() {
            this.$refs['user'].validate((valid) => {
                if(valid){
                    //表单通过
                    this.page_num++
                }else{
                    return false
                }
            })
        },
        //注册
        next2(){
            this.$refs['register'].validate((valid) => {
                if(valid){
                    //表单通过
                    var _user = {
                        name:this.user.name,
                        account:this.user.account,
                        password:this.user.password,
                        phoneNumber:this.user.phone_number,
                    }
                    UserManagementApi.SubmitRegister(_user).then(res => {
                        if(res.data.code==200){
                            //执行登录
                            UserManagementApi.SubmitLoginByAccount(_user).then(res1 => {
                                sessionStorage.setItem('token',res1.data.data)
                                this.page_num++
                            })
                        }else{
                            alert(res.data.msg)
                        }
                    })
                    
                }else{
                    return false
                }
            })
        },
        //完成注册
        next3(){
            this.$router.push('/')
        }
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";

.register {
    height: 100%;
    width: 100%;
    background-image: url('../assets/image/注册背景.png');
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    /* filter: blur(1px); */
}

.form {
    display: inline-block;
    height: 500px;
    width: 400px;
    background-color: rgb(245, 245, 245);
    margin-top: 100px;
    border-radius: 20px;
    padding: 20px;
}

.title {
    font-size: 200%;
    font-weight: 1000;
    margin-top: 30px;
}

.select {
    width: 20%;
    float: left;
}

.phone {
    float: left;
    width: 80%;
}

.Code {
    float: left;
    margin-top: 20px;
    width: 70%;
}

.button {
    float: left;
    margin-top: 20px;
    width: 30%;
}

.next {
    width: 100%;
    margin-top: 30px;
}

.text1 {
    float: left;
    margin-left: 20px;
}

.text2 {
    float: right;
    margin-right: 20px;
}
.type3{
    margin-top: 10px;
    text-align: left;
}
</style>